<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;


        }
        body{
            background-color: lightpink;
        }

        #box{
            width: 1000px;
            height: 56px;
            background:url("images/doubleOne.png") no-repeat  right center #ffffff;
            margin: 80px auto;
            border-radius: 5px;
            position: relative;

        }
        #box  ul{
            position: relative;
        }
        #box ul li{
            float: left;
            width: 80px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            font-size: 15px;
            margin-right: 15px;
            cursor: pointer;

        }
        #t_mall{
            width: 80px;
            height: 57px;
            background: url("images/tMall.png") no-repeat center ;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box">
    <span id="t_mall"></span>
    <ul>
        <li>双11狂欢</li>
        <li>服装会场</li>
        <li>数码家电</li>
        <li>家具建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
    </ul>
</div>

<script>
    window.onload = function () {
        //1.GET element
        var nav = $("box");
        var t_mall = nav.children[0];
        var ul = nav.children[1];
        var allLi = ul.children;


        //2.监听鼠标事件 标记鼠标位置

        var beginX = 0;
        for (var i = 0; i <= allLi.length; i++) {
            var li = allLi[i];
            //鼠标进入
            li.onmouseover = function () {
                end = this.offsetLeft;

            };

            //鼠标点击
            li.onmousedown = function () {
                beginX = this.offsetLeft;
            };

            //鼠标离开 为了没有焦点的时候能回到最后鼠标经过的li
            li.onmouseout = function () {
                end = beginX;

            };

        }

        //根据id获取标签
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }


        //缓动动画
        var begin = 0, end = 0;
        setInterval(function () {
            begin = begin + ( end - begin) * 0.15;
            t_mall.style.left = begin + "px";
            console.log("begin:" + begin);
        }, 10);


    }



</script>
</body>
</html>